<template>
    <div >
      <x-header :left-options="{showBack: false}"  style="" >课前聊天</x-header>
      <Scroller height="-100" lock-x  use-pulldown use-pullup :pulldown-config="{downContent: '下拉刷新', upContent: '释放后更新'}" :pullup-config="{upContent:'上拉加载更多', downContent: '释放后加载'}" ref="myScroller" @on-pulldown-loading="resetList" @on-pullup-loading="moreList">
      <div class="ListContainer">
        <p v-if='emptyVisible' class="empty-tip">--暂时没有聊天内容--</p>
        <cell  v-for="(item, index) in list" key="item.id"  :link="{path:'/chartDetail', query:{id:item.id}}" :title="item.name"   ></cell>
      </div>
    </Scroller>
  </div>
</template>
<script>
  import {Scroller, XHeader, Actionsheet,Group ,Cell } from 'vux';
  import config from '../config';


  export default {
    data () {
      return {
        list: [],
        scrollTop: 0,
        emptyVisible: false
      }
    },
    mounted(){
      this.getList()
    },
    methods:{
      getList(){
        this.$vux.loading.show({ text: '加载中' })
        this.$http({
          url:config.base+"student/courselist",
          method:"POST",
          headers:{
            'content-type':'application/x-www-form-urlencoded; charset=UTF-8',
          },
          data:this.qs.stringify({id:localStorage.userid})
        }).then( rep => {
          this.list=rep.data;
          rep.data.length<10?
          this.$refs.myScroller.disablePullup()
          :
          this.$refs.myScroller.donePullup();
          rep.data.length<1?
          this.emptyVisible = true
          :
          this.emptyVisible = false
          this.$vux.loading.hide()
        }).catch( (error) => {
          this.$vux.loading.hide()
          this.$vux.toast.show({
            text:"网络错误",
            type:'warn'
          })
        });
      },
      resetList () {
        this.$nextTick(() => {
          setTimeout(()=>{
            this.$refs.myScroller.donePulldown()
            this.$refs.myScroller.reset()
          }, 1000)
        })
      },
      moreList(){
        this.$refs.myScroller.donePullup();
        this.$refs.myScroller.disablePullup();
      },
     },
     components: {
        XHeader,
        Actionsheet,
        Scroller,
        Group,
        Cell
      },
  }
</script>